@import "../../style.scss";



.navbar{
    @include useTheme($themes) {    
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        background-color: themed('navBarColor');
        position: sticky;
        top: 0;
        color: themed('logoColor');
        border-bottom: 1px solid themed("border");
        z-index: 99;

        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.07);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.07);
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.07);

        a{
            color: themed('logoColor'); // 替换为您希望的颜色
            text-decoration: none;
            // cursor: pointer;
            display: flex;
            align-items: center;
        }

        .left{
            overflow: hidden;
            // width: 50%;
            display: flex;
            align-items: center;
            gap: 20px;
            @include mobile{
                width: 100%;
                gap: 10px;
                justify-content: space-between;
            }
            span{
                font-weight: bold;
                font-size: 28px;
                color: themed('mainColor');
                @include mobile{
                    font-size: 24px;
                }
            }
            .search{
                width: 50%;
                gap: 10px;
                display: flex;
                align-items: center;
                background-color: themed('input');
                border-radius: 5px;
                padding: 5px;
                // overflow: hidden;
                input{
                    background-color: rgba($color: #000000, $alpha: 0);
                    border: none;
                    outline: none;
                    color: themed('textColor');
                    overflow: hidden;
                }
                @include mobile{
                    width: 30%;
                    gap: 5px;
                }
            }
        }

        .right{
            @include mobile{
                display: none;
            }
            display: flex;
            align-items: center;
            gap: 20px;
            .user{
                display: flex;
                align-items: center;
                gap: 10px;
                img{
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    object-fit: cover;
                }
                span{

                }
            }
        }
    }
}

